<template>
  <div class="header">
    <div class="header_top">
      <div class="wrapper">
        <div class="left">四川化工职业技术学院</div>
        <div class="right">学校主页</div>
      </div>
      <img
      src="https://sccc.edu.cn/images/202000603_banner.png"
      alt=""
      srcset=""
    />
    </div>
    <div class="header_main">
        <div class="wrapper">
            <ul class="menu">
                <li>学校首页</li>
                <li>学校首页</li>

                <li>学校首页</li>


            </ul>
        </div>
    </div>
 
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
/* sass--可以想处理js对象处理css关系 */
.header{
    .header_top{
        background-color: #3D9BF0;
        color: #fff;
        .left,.right{
            // px固定像素为准 em 相对位置
            line-height: 3em;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        img{
            margin-left: 10%;
            width: 80%;
            height: 100%;
        }
    }
    .header_main{
        padding: .5em 0;
        height: 30px;
        font-size: medium;
        ul.menu{
            bottom: 0;
            right: 0;
            &>li{
                float: left;
                padding: 0.5em 2em;
                cursor: pointer;
            }
            &>li:current,&>li:hover{
                background-color: #3D9BF0;
                color: #fff;
            }

        }
    }
}
</style>